import { useState , useEffect} from 'react'
import logo from './logo.svg'
import './App.css'
import _ from 'lodash'
import {BrowserRouter, Route, Routes,Link} from 'react-router-dom'
// use hooks
// const Demo = () => {
//   useEffect( () => {
//     console.log('useEffect 来了')
//    //  setTimeout(() => {
//    //    setIsShow(false)
//    //  }, 1000);  一秒消失
//    return () => {
//      console.log('useEffect 走了')
//    }
//   },[])
//   return (
//     <div>
//       Demo
//     </div>
//   )
// }
const Index =() => {
  useEffect(()=>{
    console.log('useEffect => 你来到了inde页面')
    return () => {
      console.log('你离开了index页面')
    }
  })
  return (
    <>
    index
    </>
  )
}
const List =() => {
  return (
    <>
    List - Page
    </>
  )
}
function App() {
 const [isShow, setIsShow] = useState(true)
 const [count ,setCount] = useState(0)
 useEffect( () => {
   console.log(`useEffect => You click ${count} times`);
   return () => {
     console.log('.....')
   }
 },[count])
  return (
    <div className="container">
     {/* {isShow && <Demo/>} */}
     <div>
       <p>You clicked {count} times</p>
       <button onClick = {()=> setCount(count+1)}>click me</button>
     </div>
     <ul>
      <li>
        <Link to = '/'>首页</Link>
      </li>
      <li>
        <Link to = '/list'>列表</Link>
      </li>
     </ul>
     <Routes>
       <Route path="/" element = {<Index/>}></Route>
       <Route path="/list" element = {<List/>}></Route>
     </Routes>
    </div>
  )
}

export default App
